<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, PropType, ref, Ref } from 'vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { EChartsOption } from 'echarts';
  import { orderData } from '@/api/tongji/index';

  export default defineComponent({
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '385px',
      },
    },
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);

      const datatongji = ref([]);
      ceshi1();
      const ceshi2 = ref(false);
      // datatongji.value = [1,2,4,6];

      // {
      //   names: ['123','23','214'],
      //   count: [1,4,6],
      //   zcount: [10,43,12],
      //   bili: [66,12,57],
      // }
      // const namesData = ref([]);
      // console.log(datatongji['names'])
      const option: EChartsOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          },
          backgroundColor: 'rgba(9, 24, 48, 0.5)',
          borderColor: 'rgba(75, 253, 238, 0.4)',
          textStyle: {
            color: '#CFE3FC',
          },
        },
        legend: [
          {
            data: ['支付订单(个)'],
            top: '0',
            left: '0',
            itemWidth: 8,
            borderColor: 'rgba(255, 192, 0, 1)',
            textStyle: {
              fontSize: 12,
            },
            icon: 'circle',
          },
          {
            data: ['总订单(个)'],
            top: '0',
            left: '15%',
            itemWidth: 8,
            textStyle: {
              fontSize: 12,
            },
            icon: 'circle',
          },
          {
            data: ['转化率(%)'],
            top: '0',
            left: '30%',
            itemStyle: {
              borderWidth: 2,
            },
            textStyle: {
              fontSize: 12,
            },
            itemWidth: 15,
            itemHeight: 8,
          },
        ],
        grid: {
          left: '20px',
          right: '20px',
          top: '70px',
          bottom: '30px',
          containLabel: true,
        },
        toolbox: {
          show: true,
          orient: 'vertical',
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            data: datatongji.value,
            axisLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              fontSize: 14,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {},
              symbol: ['none', 'arrow'],
              symbolSize: [5, 12],
              symbolOffset: [0, 10],
            },
            max: 100,
            axisLabel: {
              fontSize: 14,
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                type: 'solid',
              },
            },
          },
          {
            type: 'value',
            axisTick: {
              show: false,
            },

            axisLine: {
              show: false,

              symbol: ['none', 'arrow'],
              symbolSize: [5, 12],
              symbolOffset: [0, 10],
            },
            min: 0,
            max: 100,
            axisLabel: {
              fontSize: 14,
              formatter: '{value} %',
            },
            splitLine: {
              show: false,
              lineStyle: {
                width: 1,
                type: 'solid',
              },
            },
          },
        ],
        series: [
          {
            name: '转化率(%)',
            yAxisIndex: 1,
            type: 'line',
            smooth: true,
            showSymbol: false,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(32,128,247,.4)',
                },
                {
                  offset: 1,
                  color: 'rgba(32,128,247,0)',
                },
              ]),
            },
            data: [12],
            symbol: 'circle',
            symbolSize: 8,
            color: '#2080F7',
            lineStyle: {
              color: '#2080F7',
            },
          },
          {
            z: 2,
            type: 'bar',
            yAxisIndex: 0,
            name: '支付订单(个)',
            color: '#2080F7',
            barWidth: 24,
            data: [12],
          },
          {
            z: 1,
            type: 'bar',
            barGap: '-100%',
            yAxisIndex: 0,
            name: '总订单(个)',
            color: '#B2D4FF',
            barWidth: 24,
            data: [12],
          },
        ],
      };

      function ceshi1(){
        // datatongji.value = [1,2,4,6];
        orderData({attr:0}).then((res) => {
          // datatongji.value = res
          // console.log(datatongji.value.names)

          // datatongji.value = res.names;
          

          // for(let i=0;i<res.names.length;i++){
          //   datatongji.value.push(res.names[i]);
          // }
          datatongji.value = JSON.stringify(res.names)
          console.log(datatongji.value)
          // console.log(JSON.stringify(datatongji.value['names']));
          // datatongji.value = datatongji.value['names'];

          // namesData.value = datatongji.value['names'];
          // console.log(datatongji.value['names'])
          setOptions(option);
        });
      }

      onMounted(() => {
        ceshi1();
      });
      return { chartRef };
    },
  });
</script>
